<template>
  <transition appear tag="div">
      <div class="mobile5-box">

      <my-header :title="title"></my-header>

    <div class="header">
      <img src="../../../assets/image/mobile6/mobile6-1.jpg" alt>
    </div>

    <div class="content">
      <div class="content1">
        <img src="../../../assets/image/mobile6/mobile6-2.jpg" alt>
        <div class="recommend-list">
            <div class="rl-item" v-for="(value, index) in moblie5List" :key="index">
                <router-link :to="'/product/' + value.productCode">
                    <div class="wrap">
                        <img :src="value.productImageUrl" alt="">
                        <div class="rl-text">
                            <span class="name">{{ value.productName }}</span>
                            <span class="info">{{ value.introduction }}</span>
                            <p class="list-price">
                                <span class="price-left">
                                    <em>￥</em>
                                    {{ parseInt(value.productPrice/100) + '.00' }}
                                </span>
                                <span class="price-right">立即购买</span>
                            </p>
                        </div>
                    </div>
                </router-link>
            </div>
        </div>
      </div>
      <div class="content2">
        <img src="../../../assets/image/mobile6/mobile6-3.jpg" alt>
        <div class="recommend-list">
            <div class="rl-item" v-for="(value, index) in moblie5List1" :key="index">
                <router-link :to="'/product/' + value.productCode">
                    <div class="wrap">
                        <img :src="value.productImageUrl" alt="">
                        <div class="rl-text">
                            <span class="name">{{ value.productName }}</span>
                            <span class="info">{{ value.introduction }}</span>
                            <p class="list-price">
                                <span class="price-left">
                                    <em>￥</em>
                                    {{ parseInt(value.productPrice/100) + '.00' }}
                                </span>
                                <span class="price-right">立即购买</span>
                            </p>
                        </div>
                    </div>

                </router-link>
            </div>
        </div>
      </div>

      <div class="content3">
        <img src="../../../assets/image/mobile6/mobile6-4.jpg" alt>
        <div class="recommend-list">
            <div class="rl-item" v-for="(value, index) in moblie5List2" :key="index">
                <router-link :to="'/product/' + value.productCode">
                    <div class="wrap">
                        <img :src="value.productImageUrl" alt="">
                        <div class="rl-text">
                            <span class="name">{{ value.productName }}</span>
                            <span class="info">{{ value.introduction }}</span>
                            <p class="list-price">
                                <span class="price-left">
                                    <em>￥</em>
                                    {{ parseInt(value.productPrice/100) + '.00' }}
                                </span>
                                <span class="price-right">立即购买</span>
                            </p>
                        </div>
                    </div>

                </router-link>
            </div>
        </div>
      </div>

      <div class="content4">
        <img src="../../../assets/image/mobile6/mobile6-5.jpg" alt>
        <div class="recommend-list">
            <div class="rl-item" v-for="(value, index) in moblie5List3" :key="index">
                <router-link :to="'/product/' + value.productCode">
                    <div class="wrap">
                        <img :src="value.productImageUrl" alt="">
                        <div class="rl-text">
                            <span class="name">{{ value.productName }}</span>
                            <span class="info">{{ value.introduction }}</span>
                            <p class="list-price">
                                <span class="price-left">
                                    <em>￥</em>
                                    {{ parseInt(value.productPrice/100) + '.00' }}
                                </span>
                                <span class="price-right">立即购买</span>
                            </p>
                        </div>
                    </div>

                </router-link>
            </div>
        </div>
      </div>

      <div class="content5">
        <img src="../../../assets/image/mobile6/mobile6-6.jpg" alt>
        <div class="recommend-list">
            <div class="rl-item" v-for="(value, index) in moblie5List4" :key="index">
                <router-link :to="'/product/' + value.productCode">
                    <div class="wrap">
                        <img :src="value.productImageUrl" alt="">
                        <div class="rl-text">
                            <span class="name">{{ value.productName }}</span>
                            <span class="info">{{ value.introduction }}</span>
                            <p class="list-price">
                                <span class="price-left">
                                    <em>￥</em>
                                    {{ parseInt(value.productPrice/100) + '.00' }}
                                </span>
                                <span class="price-right">立即购买</span>
                            </p>
                        </div>
                    </div>

                </router-link>
            </div>
        </div>
      </div>

      <div class="content6">
        <img src="../../../assets/image/mobile6/mobile6-6.jpg" alt>
        <div class="recommend-list">
            <div class="rl-item" v-for="(value, index) in moblie5List5" :key="index">
                <router-link :to="'/product/' + value.productCode">
                    <div class="wrap">
                        <img :src="value.productImageUrl" alt="">
                        <div class="rl-text">
                            <span class="name">{{ value.productName }}</span>
                            <span class="info">{{ value.introduction }}</span>
                            <p class="list-price">
                                <span class="price-left">
                                    <em>￥</em>
                                    {{ parseInt(value.productPrice/100) + '.00' }}
                                </span>
                                <span class="price-right">立即购买</span>
                            </p>
                        </div>
                    </div>

                </router-link>
            </div>
        </div>
      </div>
    </div>
  </div>
  </transition>
</template>

<script>
// import imgUrl1 from '../../../assets/image/mobile5/mobile5-1.jpg'
import myHeader from 'Components/common/myHeader.1'

import {mapActions, mapGetters} from 'vuex'
export default {
    components: {
        myHeader
    },
    data () {
        return {
            moblie5List: [],
            moblie5List1: [],
            moblie5List2: [],
            moblie5List3: [],
            moblie5List4: [],
            moblie5List5: [],
            title: '药品列表',
        }
    },
    methods: {
        ...mapActions(['getMobile5'])
    },
    computed: {
        ...mapGetters(['getMobile5s'])
    },
    async mounted () {
        await this.getMobile5('169119,11842,11963,168195');
        this.moblie5List = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('169119,154490,154481,156392,165410,594084');
        this.moblie5List1 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('11842,75063,814896,814586');
        this.moblie5List2 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('53359,53355,53348,666454');
        this.moblie5List3 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('168195,11914,222021,354239');
        this.moblie5List4 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('171799,154626,168204,154478,220452,168669');
        this.moblie5List5 = this.getMobile5s && this.getMobile5s || [];

        // 改变背景颜色
        document.querySelector('.van-nav-bar__title').style.color = '#ffffffcc';
        document.querySelector('.van-icon').style.color = '#ffffffcc';
        document.querySelectorAll('.van-icon')[1].style.color = '#ffffffcc';
        document.querySelector('.van-hairline--bottom').style.background = 'rgb(144, 18, 3)';
        document.querySelector('.van-hairline--bottom').style.opacity = '0.9'
        
    }
};
</script>

<style lang="scss" scoped>
body {
  background-color: rgb(144, 18, 3);
  color: #333;
}
a {
    color: #333;
}
// .van-nav-bar__title {
//     color: #ffffff !important;
// }

img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
// .header {
//     .coupons {
//         padding: .1rem;
//         background: #80149e;
//     }
// }

.recommend-list {
    display: flex;
    flex-wrap: wrap;    
    background-color: rgb(144, 18, 3);
    padding: 0.19rem 0.08rem;
    .rl-item {
        padding: .05rem;
        width: 50%;
        box-sizing: border-box;
        .wrap {
            background-color: rgb(255, 231, 195);
            padding: .1rem;
            border-radius: .1rem;
            img {
                width: 100%;
                height: auto;
                margin-bottom: 0.05rem;
            }
            span {
                display: block;
            }
            .name {
                font-size: .14rem;
                height: .21rem;   
                // ellipsis(); 
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 1.731rem;
            }
            .info {
                color: #999;
                font-size: .12rem;
                height: .18rem;    
                // ellipsis();
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 1.5rem;
            }
            .list-price {
                display: flex;
                justify-content: space-between;
                padding-top: .1rem;
                .price-left {
                    font-size: .15rem;
                    display: flex;
                    align-items: center;
                    em {
                        font-size: .1rem;
                    }
                }
                .price-right {
                    padding: .06rem .1rem;
                    border-radius: .2rem;
                    background: #f53b10;
                    color: #fff;
                    font-size: .14rem;
                }
            }
        }
    }
}

// 动画
    .v-enter,
    .v-leave-to{
        opacity: 0;
        transform: translate(150, 180);
    }
    .v-enter-active, .v-leave-active{
        transition: all 1s ease;
    }

    .v-move{
       transition: all 1s ease;
    }
    .v-leave-active{
        position: absolute;
    }
</style>


